<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <title>Xiaohuan Chat 注册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
        }
        .login-container {
            width: 600px;
            height: 315px;
            margin: 0 auto;
            margin-top: 10%;
            border-radius: 15px;
            box-shadow: 0 10px 50px 0px /*rbg(59, 45, 159)*/;
            background-color: rgb(95, 76, 194);
        }
        .left-container {
            display: inline-block;
            width: 330px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            padding: 60px;
            background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));
        }
        .title {
            color: #fff;
            font-size: 18px;
            font-weight: 200;
        }
        .title span {
            border-bottom: 3px solid rgb(237, 221, 22);
        }
        .input-container {
            padding: 20px 0;
        }
        input {
            border: 0;
            background: none;
            outline: none;
            color: #fff;
            margin: 20px 0;
            display: block;
            width: 100%;
            padding: 5px 0;
            transition: .2s;
            border-bottom: 1px solid rgb(199, 191, 219);
        }
        input:hover {
            border-bottom-color: #fff;
        }
        ::-webkit-input-placeholder {
            color: rgb(199, 191, 219);
        }
        .message-container {
            position: absolute;
            padding: 30px;
            font-size: 14px;
            transition: .2s;
            color: rgb(199, 191, 219);
            cursor: pointer;
        }
        .message-container:hover {
            color: #fff;
        }
        .right-container {
            width: 145px;
            display: inline-block;
            height: calc(100% - 120px);
            vertical-align: top;
            padding: 60px 0;
        }
        .face-container {
            text-align: center;
            color: #fff;
            font-size: 18px;
            font-weight: 200;
        }
        .face-container span {
            border-bottom: 3px solid rgb(237, 221, 22);
        }
        .action-container {
            font-size: 10px;
            color: #fff;
            text-align: center;
            position: relative;
            top: 200px;
        }
        .action-container button {
            border: 1px solid rgb(237, 221, 22);
            padding: 10px;
            display: inline;
            line-height: 20px;
            border-radius: 20px;
            position: absolute;
            bottom: 10px;
            left: calc(72px - 20px);
            transition: .2s;
            cursor: pointer;
        }
        .action-container button:hover {
            background-color: rgb(237, 221, 22);
            color: rgb(95, 76, 194);
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="left-container">
        <div class="title"><span>注册</span></div>
        <div class="input-container">
            <form name="userForm">
                <input id="userName" type="text" name="username" placeholder="用户名" required>
                <input id="userPwd" type="password" name="password" placeholder="密码" required>
                <input id="kaptchaCode" type="text" name="kaptchaCode" placeholder="验证码" required style="float: left;width: 50%;">
                <img src="/kaptcha" id="kaptcha" width="110px" height="40px" style="float: right;padding-bottom: 30px">
            </form>
        </div><br>
        <div class="message-container">
            <span>Hello, Start chatting ！</span>
        </div>
    </div>
    <div class="right-container">
        <div class="face-container">
            <span class="regist">头像</span><br>
            <img id="user-header" style="width: 100px;height: 100px;object-fit: cover;" src="">
            <!-- 让图片的点击等同于文件选择事件 -->
            <input type="file" name="file" id="file" style="display: none;"/>
        </div>
        <div class="action-container">
            <button type="button" onclick="submitUser()">提交</button>
        </div>
    </div>
</div>

<script src="/js/JQuerym.js"></script>
<script type="application/javascript">
    submitUser = function() {
        console.log("开启");
        if(!$("#userName").val() || !$("#userPwd").val()) {
            alert("不能为空");
            return false;
        }
        console.log($("#file").get(0).files[0]);
        console.log({"userName":$("#userName").val(),"userPwd":$("#userPwd").val(),"file":$("#file").get(0).files[0]});
        <!-- 可以使用formdata提交post请求 -->
        var form = new FormData();
        //append方法将请求参数装入
        form.append("userName",$("#userName").val());
        form.append("userPwd",$("#userPwd").val());
        form.append("kaptchaCode",$("#kaptchaCode").val())
        form.append("file",$("#file").get(0).files[0]);
        $.ajax({
            url: "/login/register",
            type: 'POST',
            contentType:  false ,  //"multipart/form-data; boundary=----WebKitFormBoundaryXUIhYHlAmsiYAKUG",  //因为上传图片，关闭type
            processData: false,  //会自动加上boundary部分
            cache: false,
            mimeType: "multipart/form-data",
            data: form,        //JSON.stringify({,})也可以进行数据的手动封装
            success: function (response) {
                //不是application/json，不会将响应自动进行JSON转化，手动转化
                response = JSON.parse(response);
                console.log(response);
                //失败
                if(response.code == -1) {
                    alert(response.message);
                } else {
                    alert("注册成功");
                    var chatUser = response.data;
                    //自动填充，Get方式传递数据
                    console.log(chatUser);
                    chatUser.userPwd = window.btoa(chatUser.userPwd);
                    location.href = encodeURI("/login.html?" + "userName=" + chatUser.userName); // + "&userPwd=" + chatUser.userPwd,密码传递不安全，让用户自己输入
                }
            }
        });
    }

    //事件等同
    $("#user-header").click(function() {
        $("#file").click();
    })

    $("#file").change(function(e) {
        console.log(e.target.files[0]);
        var imgUrl = e.target.files[0];
        //前台使用reader读取图片立即显示
        var reader = new FileReader();
        reader.readAsDataURL(imgUrl);
        //读取完成显示
        reader.onload = function() {
            //读取结果
            var imgSrc = reader.result;
            $("#user-header").attr("src",imgSrc);
        }
    })

    //验证码刷新
    $(function () {
        var $kaptcha = $("#kaptcha");
        $kaptcha.click(function () {
            $kaptcha.get(0).src = "/kaptcha?" + Math.floor(Math.random() * 1000);
        })
    })
</script>
</body>
</html>